<template>
  <div class="comm-size">
    <span class="label">尺寸:
      <span class="value">张青涩</span>
    </span>
    <div class="size-list">
      <div class="size-item active">5套</div>
      <div class="size-item">12套</div>
      <div class="size-item">333套</div>
    </div>
    <div class="image-list">
      <div class="image-item active" v-for="i in 13" :key="i.id">
        <img src="@/assets/images/login/banner.jpg" alt="">
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "comm-size"
}
</script>

<style scoped lang="less">
.comm-size {
  .label {
    display: block;
    margin-right: 6px;
    margin-bottom: 6px;
    color: @t-title-color;
    font-size: 14px;
    font-weight: 500;

    .value {
      color: #FF186B;
    }
  }

  .size-list {
    display: block;
    overflow: hidden;

    .size-item {
      float: left;
      padding: 4px 12px;
      background: #FFFFFF;
      border-radius: 2px 2px 2px 2px;
      opacity: 1;
      border: 1px solid #DCDEE2;
      cursor: pointer;
      color: @t-title-color;
      font-size: 14px;
      font-weight: 400;
      margin-right: 10px;
      margin-bottom: 10px;
    }

    .active {
      border: 1px solid @primary-color;
      color: @primary-color;
    }
  }
}
</style>